<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="title"
        size="mini"
        placeholder="请输入专利名称"
        style="width: 300px; margin-left: 10px"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        size="mini"
        class="u-m-l-10"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      />
      <el-button
        type="warning"
        size="mini"
        icon="el-icon-plus"
        @click="handleForm()"
      >
        添加
      </el-button>
    </div>

    <div class="body-container">
      <el-table
        v-loading="listLoading"
        :data="listData"
        border
        size="mini"
        empty-text="暂无数据"
        website-url
      >
        <el-table-column type="index" width="50" fixed="left" />
        <el-table-column
          prop="name"
          label="专利名称"
          min-width="200px"
          fixed="left"
        />
        <el-table-column
          prop="operator"
          label="联系人"
          min-width="100px"
          fixed="left"
        />
        <el-table-column
          prop="telephone"
          label="联系方式"
          min-width="150px"
          fixed="left"
        />
        <el-table-column prop="logoUrl" min-width="100px" label="专利图片">
          <template slot-scope="scope">
            <a
              :href="scope.row.logoUrl"
              target="_blank"
            ><img
              :src="scope.row.logoUrl"
              width="30px"
            ></a>
          </template>
        </el-table-column>
        <el-table-column label="是否审核" width="80px">
          <template slot-scope="scope">
            {{ scope.row.auditStatus | getText }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          min-width="100px"
          label="提交时间"
        />
        <el-table-column
          label="操作"
          width="200"
          fixed="right"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleForm(row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDel(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表单 -->
    <patentForm ref="patentForm" @refreshDataList="getList" />
    <!-- 分页 -->
    <el-pagination
      style="padding: 20px 0; text-align: center"
      background
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
  </div>
</template>

<script>
import patentForm from './patentForm'
import { fetchPatentList, delPatent } from '@/api/patent'
import waves from '@/directive/waves' // waves directive
import { fetchSchoolList } from '@/api/school'

export default {
  name: 'Schools',
  directives: { waves },
  filters: {
    getText(val) {
      return parseInt(val) === 1 ? '发布成功' : '未发布'
    }
  },
  components: { patentForm },
  data() {
    return {
      universityName: '',
      title: '',
      page: 1, // 当前页数
      pageSize: 10, // 每页
      totalPage: 0, // 总数
      listLoading: true,
      listData: [],
      listAllData: [],
      listSchoolData: []
    }
  },
  created() {
    this.getList()
    this.getSchoolList()
  },
  activated() {
    this.getList()
    this.getSchoolList()
  },
  methods: {
    getSchoolList() {
      fetchSchoolList([]).then((response) => {
        if (response && response.code === 1) {
          this.listSchoolData = response.data.list
          console.info(this.listSchoolData)
        } else {
          this.listSchoolData = []
        }
      })
    },
    delpatents(data) {
      delPatent(data).then((response) => {
        if (response && response.code === 1) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.getList()
            }
          })
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    handleDel(row) {
      this.$confirm(`确定进行删除操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            ids: [row.id]
          }
          this.delpatents(data)
        })
        .catch(() => {})
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.page = 1
      this.getList()
    },
    currentChangeHandle(val) {
      this.page = val
      this.getList()
    },
    // 表单
    handleForm(row = '') {
      this.$nextTick(() => {
        this.$refs.patentForm.init(row)
      })
    },
    //  列表
    getList() {
      this.listLoading = true
      const data = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.title
      }
      fetchPatentList(data).then((response) => {
        if (response && response.code === 1) {
          this.listData = response.data.list
          this.listAllData = response.data.list
          this.totalPage = response.data.total
        } else {
          this.listData = []
          this.totalPage = 0
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      })
    },
    // 搜索列表
    handleFilter() {
      // const keyword = this.title
      this.page = 1
      // this.pageSize = 30
      // const arr = []
      // if (keyword === '') {
      //   this.listData = this.listAllData
      //   return
      // }
      // this.listAllData.map((item) => {
      //   if (item.name.indexOf(keyword) >= 0) {
      //     arr.push(item)
      //   }
      // })
      // this.listData = arr
      // this.totalPage = arr.length
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .body-container {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    i {
      cursor: pointer;
    }
  }
}
</style>
